<script >
import axios from "axios";
import GraphVis_eCharts_springboot from "@/components/Graph/GraphVis_eCharts_springboot.vue";
import {SPRINGBOOT} from "@/assets/js/HrefLocation"
export default {
  components:{
    GraphVis_eCharts_springboot
  },
  data(){
    return{
      node1:'',
      node2:'',
      relation:'',
      processCounter: "", // 初始进度为-1，表示未开始
    }
  },
  mounted() {

    let ws = new WebSocket("ws://"+SPRINGBOOT+"/hkgapi/counter")
    ws.onopen = function(){
      console.log('open')

      ws.send("hello")
    }
    ws.onmessage = function(msg){

      this.processCounter=msg.data;
      console.log(msg.data)
    }.bind(this)//使得this能直接指向Vue组件的变量
    ws.onclose = function(){
      console.log('close')
    }


  },
  methods:{
    freshEcharts(){
      this.$router.go(0)
    },
    add(){
      axios.post("/hkgapi/hydro/addNodesAndRelation",{
       node1:this.node1,
        node2:this.node2,
        relation:this.relation
      }).then(res=>{
        if(res.data===0){
          this.freshEcharts()
         this.$alert("成功","提示")

        }else{
          this.$alert("错误码："+res.data+" "+"两节点都已存在","提示")
        }
      }).catch(err=>{
        window.alert("错误："+err)
      })
    },
    clearAllNodes(){
      axios.post("/hkgapi/hydro/clearAllNodes",{}).then(()=>{
        this.freshEcharts()
      })
    },
    mysql2Neo(){
      axios.post("/hkgapi/hydro/mysql2Neo",{}).then(()=>{
        this.freshEcharts()
      })
    },
    neo2Mysql(){
      axios.post("/hkgapi/hydro/neo2Mysql",{}).then(res=>{
        this.$alert("结果："+res.data,"提示")
      })
    },

  }
}
</script>

<template>
<div>
  <router-link to="/">
    <el-button type="danger">返回</el-button>
  </router-link>
  <h1>添加节点和关系</h1>
  <br>
  父节点：<el-input v-model="node1" placeholder="请输入第一个节点"></el-input>
  子节点：<el-input v-model="node2" placeholder="请输入第二个节点"></el-input>
  关系：<el-input v-model="relation" placeholder="请输入关系"></el-input>
<el-button v-on:click="add" type="danger">添加</el-button>
  <el-button v-on:click="clearAllNodes" type="warning">清除全部节点和关系（仅操作neo4j）</el-button>

  <el-button type="primary" v-on:click="freshEcharts">重新渲染echarts</el-button>

  <el-button type="primary" v-on:click="mysql2Neo">从Mysql中恢复关系</el-button>

  <el-button type="primary" v-on:click="neo2Mysql">保存所有关系到Mysql</el-button>
  <h1 v-if="processCounter!==''">当前处理进度：{{processCounter}}</h1>

  <el-progress type="line" v-if="processCounter!==''" :percentage="processCounter"></el-progress>
  <br>
  <el-card>
    <GraphVis_eCharts_springboot></GraphVis_eCharts_springboot>
  </el-card>


</div>
</template>

<style scoped>

</style>